/**
 * 虚拟资产
 * */
import React, { useEffect, useState } from 'react';
import { Input, Spin, message, Tooltip } from 'antd';
import { useRequest } from '@/hooks';
import { genID } from '@/utils/utils';
import IconFont from '@/components/IconFont';
import { size } from 'lodash';
import { DynamicTable } from '@/pages/TurnoverSetting/EntrySetting/components';
import { getArranged } from '../../../services';

const VirtualPropertyTable = ({ onChange, entryPersonnelCode, canAction, form }) => {
    const [dataSource, setDataSource] = useState([]);

    // 获取系统
    const { loading, run: fetchSystem } = useRequest(() => getArranged(entryPersonnelCode), {
        manual: true,
        onSuccess: res => {
            const { code, msg, data } = res || {};
            if (code === 10000) {
                const result = data?.map(item => ({
                    ...item,
                    key: genID(10),
                    isValidatorPass: (item.associateAccountCode && item.associateAccountPassword) || false
                }));
                setDataSource(result || []);
            } else {
                message.error(msg);
            }
        }
    });

    useEffect(() => {
        fetchSystem();
    }, []);

    useEffect(() => {
        if (onChange) {
            onChange(dataSource);
        }
    }, [dataSource]);

    const columns = [
        {
            title: '系统',
            dataIndex: 'associateAccountName',
            width: 150
        },
        {
            dataIndex: 'id',
            hide: true // 不展示, 但是需要记录的数据
        },
        {
            dataIndex: 'assetCode',
            hide: true // 不展示, 但是需要记录的数据
        },
        {
            title: '账号',
            dataIndex: 'associateAccountCode',
            render: ({ text, fieldDecorator, record }) => (
                <>
                    {fieldDecorator('associateAccountCode', {
                        initialValue: text,
                        rules: [
                            {
                                validator(rule, val, callback) {
                                    if (!canAction) {
                                        callback();
                                    }
                                    const regex = /^([a-zA-Z0-9]+[_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
                                    if (!regex.test(val) || val.length < 4 || val.length > 32) {
                                        callback('只能字母、数字、 点(.)、减号(-)或下划线(_)组成');
                                    }
                                    callback();
                                }
                            }
                        ]
                    })(
                        <Input
                            placeholder="请输入账号"
                            maxLength={32}
                            disabled={record.editable === 0 || !canAction}
                            style={{ width: '280px' }}
                        />
                    )}
                </>
            )
        },
        {
            title: '密码',
            dataIndex: 'associateAccountPassword',
            editable: true,
            render: ({ text, fieldDecorator }) => (
                <>
                    {fieldDecorator('associateAccountPassword', {
                        initialValue: text,
                        rules: [
                            {
                                validator(rule, val, callback) {
                                    if (!canAction) {
                                        callback();
                                    }
                                    const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/;
                                    if (!regex.test(val) || val.length < 8 || val.length > 20) {
                                        callback('密码需包含大小写字母、数字，长度在8-20！');
                                    }
                                    callback();
                                }
                            }
                        ]
                    })(
                        <Input
                            placeholder="请输入密码"
                            minLength={8}
                            maxLength={20}
                            disabled={!canAction}
                            style={{ width: '160px' }}
                        />
                    )}
                </>
            )
        },
        {
            title: '操作',
            dataIndex: 'operator',
            width: 100,
            render: ({ record }) => {
                const { associateAccountUrl } = record;
                return size(associateAccountUrl) > 0 ? (
                    <Tooltip placement="top" title="打开页面">
                        <a href={record.associateAccountUrl} target={record.associateAccountUrl} disabled={!canAction}>
                            <IconFont icon="icondenglu" style={{ fontSize: '24px' }} />
                        </a>
                    </Tooltip>
                ) : (
                    '-'
                );
            }
        }
    ];
    return (
        <Spin spinning={loading}>
            <DynamicTable
                form={form}
                initialValue={dataSource || []}
                fieldName="systemList"
                columns={columns}
                disabled
            />
        </Spin>
    );
};
export default React.forwardRef(VirtualPropertyTable);
